<template>
  <div id="postList">
    <!-- <div id="carousel">
      <Carousel autoplay :autoplay-speed="speed">
        <Carousel-item>
          <img
            src="@/assets/images/carousel-example.jpeg"
            class="carousel-item"
          />
        </Carousel-item>
        <Carousel-item>
          <img
            src="@/assets/images/carousel-example.jpeg"
            class="carousel-item"
          />
        </Carousel-item>
      </Carousel>
    </div> -->
    <!-- <div class="post" v-for="(item, index) in postList" :key="index">
      <div class="desc" @click="toArticleDetails(item.postId)">
        <p class="title" style="font-size: x-large; text-align: left">
          {{ item.title }}
        </p>
        <p class="other" style="font-size: x-small; margin-top: 15px">
          <span style="margin-left: 0px">作者：{{ item.upId }}</span>
          <span style="margin-left: 10px">类型：{{ item.type }}</span>
          <span style="margin-left: 10px">点赞数{{ item.agree }}</span>
        </p>
      </div>
    </div> -->
    <!-- 修改后的贴文区页面 -->
    <div
      v-show="postList.length != 0"
      class="contentContainer"
      @click="toArticleDetails(item.id)"
      v-for="item in postList"
      :key="item.id"
    >
      <div class="avatarContainer">
        <img class="avatar" src="@/assets/images/avatar.jpg" />
        <div>
          <span>作者:{{ item.upId }}</span>
          <span>发布于:{{ format(item.upTime) }}</span>
        </div>
      </div>
      <div class="content">
        <span>{{ item.content }}</span>
      </div>
      <div class="bottomContainer">
        <div>
          <span>{{ item.scan ? item.scan:0 }}次浏览</span>
        </div>
        <div>
          <span>类型:{{ item.type }}</span>
        </div>
        <div>
          <img
            class="icon"
            v-show="agreeFlag(item.id)"
            src="@/assets/icon/已点赞.png"
          />
          <img
            class="icon"
            v-show="!agreeFlag(item.id)"
            src="@/assets/icon/同意.png"
          />
          <span>{{ item.agree }}</span>
        </div>
        <div>
          <img class="icon" src="@/assets/icon/评论.png" />
          <span>{{ item.commentTimes ? item.commentTimes:0  }}条评论</span>
        </div>
        <div v-show="mypostFlag" @click.stop="handleMore(item.id)">
          <img src="@/assets/icon/更多.svg" class="icon" />
          <span>操作</span>
        </div>
      </div>
    </div>
    <!-- <div v-show="postList.length == 0">目前还没有贴文</div> -->
    <!-- 弹框，展示对个人贴文的操作 -->
    <el-dialog :visible.sync="centerDialogVisible" width="20%" center>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" icon="el-icon-delete" round @click="deletePost"
          >删 除</el-button
        >
        <el-button type="success" icon="el-icon-edit" round @click="editPost"
          >编 辑</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dateFormat from '@/utils/dateFormat';
import { deletePostById, postPraiseList } from "@/utils/api";
export default {
  name: "",
  // props: {
  //   postList: Array,
  // },
  props: ["postList", "mypostFlag"], //mypostFlag为true表示展示的是个人发布的所有帖子，与贴文主页相比会有更多操作，比如删除贴文，修改贴文
  data() {
    return {
      postPraiseList: [], //保存用户点赞过的所有贴文id
      speed: 5000,
      // 个人贴文操作相关
      centerDialogVisible: false, //是否显示对个人贴文进行操作的对话框
      postId: "", //当前要操作的贴文id
    };
  },
  methods: {
    // 跳转到贴文的详情页
    toArticleDetails(postId) {
      this.$router.push({ path: "/bingo/articleDetails", query: { postId } });
    },
    // 打开操作个人贴文的对话框
    handleMore(postId) {
      this.centerDialogVisible = true;
      this.postId = postId;
    },
    // 删除个人贴文
    async deletePost() {
      this.centerDialogVisible = false;
      // 通过postId删除贴文
      let result = await deletePostById(this.postId);
      if (result.code == 200) {
        console.log(result.code);
        this.$message({
          message: "删除贴文成功!",
          type: "success",
        });
        // 跳转到个人贴文页面
        this.$router.push({
          path: "/bingo/User_home/upload/my-post",
        });
      }
    },
    // 编辑个人贴文
    editPost() {
      this.centerDialogVisible = false;
      this.$router.push({
        path: "/bingo/User_home/upload/up-post",
        query: { postId: this.postId },
      });
    },
    async initPostPraiseIds(userId) {
      let result = await postPraiseList({ userId });
      this.postPraiseList = result.data.postPraiseIds;
    },
    // 日期格式化
    format(date){
      return dateFormat(date);
    }
  },
  computed: {
    agreeFlag() {
      return (postId) => {
        if (this.postPraiseList.indexOf(postId) != -1) {
          return true;
        } else {
          return false;
        }
      };
    },
  },
  created() {
    this.initPostPraiseIds(sessionStorage.getItem("userId"));
  },
};
</script>

<style scoped>
.carousel-item {
  width: 100%;
  height: 200px;
  margin-top: 30px;
  border-radius: 5px;
}
.desc:hover {
  box-shadow: 0px 0px 8px #888888;
  cursor: pointer;
}
.desc {
  padding: 5px;
}
.post {
  margin-top: 20px;
}
/* 贴文内容包裹器 ===============================================================================*/
.contentContainer {
  padding: 10px;
  width: 830px;
  border-radius: 5px;
  /* height: 255.9px; */
  /* border: 1px solid black; */
  margin: 10px 0;
}
.contentContainer:hover {
  box-shadow: 0px 0px 8px #888888;
  cursor: pointer;
}
/* 头像、昵称、发布时间 */
.avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.avatarContainer div {
  height: 49px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-left: 10px;
}
.avatarContainer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/* 贴文内容区 */
.contentContainer .content {
  width: 810px;
  /* border: 1px solid red; */
  margin: 5px 0;
}
/* 底部点赞、收藏、评论、浏览次数导航条 */
.icon {
  width: 24px;
  height: 24px;
  margin-right: 2px;
}
.bottomContainer div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 15px;
}
.bottomContainer {
  width: 810px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* border: 1px solid red; */
}
</style>
